<template>
	<view class="container">
		<navbar :background="background" :bgSize='bgSize' :title="pageType == 0 ?'我的收藏':'我的足迹'" color='#fff'></navbar>
		<view class="linear-goods-list-bg">
			<image :src='hostUrl+"/static/images/cart_bg.png"'></image>
		</view>
		<view v-if='showPage'>
			<load-page></load-page>
		</view>
		<view class="wrap" v-else>
			<view class="edit line-v-center" @tap='handleGoods' v-if='list.length > 0'>
				{{isHandleFlag ? '退出管理':'管理'}}
			</view>
			<scroll-view :style="{height:scrollViewHeight+'px'}" class="main" scroll-y="true" @scrolltolower='loadData' :refresher-triggered='refresherTriggered' refresher-enabled='true' @refresherrefresh='refreshList'>
				
				<view class="goods-wrap" :style="{paddingBottom:isHandleFlag ? safeAreaBottom+'px':''}" v-if='list.length > 0'>
					<view class="goods-con" >
						<view class="goods-item-con" v-for='(item,index) in list' @tap='toGoodsDetail(item.goods_id)'>
							<small-goods-item :item='item' @addCart='addCart' :Authorization='Authorization'></small-goods-item>
							<template v-if='isHandleFlag'>
								<view class="select line-v-center" @tap.stop='selectGoods(index)'>
									<image :src='item.is_checked ?"/static/cart-checked.png":"/static/cart-check.png"'>
									</image>
								</view>
							</template>
						</view>
					</view>
					<loading :loadEnd='loadEnd'></loading>
				</view>
				<view class="no-data-main" v-else>
					<!-- <no-data noDataImg='/static/no-collect.png'></no-data> -->
					<no-data noDataImg='/static/no-collect.png' v-if='pageType == 0'></no-data>
					<no-data v-else></no-data>
				</view>
			</scroll-view>
		</view>
		<template v-if='list.length > 0'>
			<view class="footer-wrap" v-if='isHandleFlag'>
				<view class="footer">
					<view class="footer-select line-v-center" @tap='selectAll'>
						<image :src='allChecked ? "/static/cart-checked.png":"/static/cart-check.png"'>
						</image>
						全选
					</view>
					<template v-if='pageType == 0'>
						<button class="sure sure-act line-center" :disabled="isDisabled" :loading="isLoading" v-if='selectGoodsIds' @tap='cancelCoolect'>取消收藏</button>
						<button class="sure line-center" :disabled="isDisabled" :loading="isLoading" v-else>取消收藏</button>
					</template>
					<template v-else>
						<button class="sure sure-act line-center" :disabled="isDisabled" :loading="isLoading" v-if='selectGoodsIds' @tap='cancelCoolect'>删除</button>
						<button class="sure line-center" :disabled="isDisabled" :loading="isLoading" v-else>删除</button>
					</template>
				</view>
			</view>
		</template>
		
		<!-- sku弹窗 -->
		<sku-modal :skuMode='1' :goods="goodsDetail" ref='skuModal'></sku-modal>
	</view>
</template>

<script>
	const app = getApp();
	import smallGoodsItem from '@/components/small-goods-item/small-goods-item.vue';
	import skuModal from '@/components/sku-modal/sku-modal.vue';
	export default {
		components: {
			smallGoodsItem,
			skuModal
		},
		data() {
			return {
				background: `url(${app.globalData.hostUrl}/static/images/cart_bg.png)`,
				bgSize: '100% 344rpx',
				hostUrl: app.globalData.hostUrl,
				scrollViewHeight: 0,
				pageType: 0,
				page: 1,
				totalPage: '',
				list: [],
				isHandleFlag: false,
				loadEnd: false,
				showPage: true,
				refresherTriggered:true,
				safeAreaBottom: app.globalData.safeAreaBottom + 30,
				allChecked:false,
				isDisabled:false,
				isLoading:false,
				selectGoodsIds:'',
				goodsDetail:{},
				Authorization:''
			};
		},
		onShow(){
			this.Authorization = uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : "";
			console.log('Authorization',this.Authorization)
			if(app.getPlatform() == 'mp') this.safeAreaBottom = app.globalData.safeAreaBottom + 80
		},
		onLoad(option) {
			this.pageType = option.type ? option.type : 0;
			this.getScrollHeight()
			this.getList()
		},
		methods: {
			getList() {
				const that = this;
				const apiUrl = that.pageType == 0 ? app.getApi().user.userCollectList:app.getApi().user.userFootList
				app.globalRequest({
					api: apiUrl,
					data: {
						page: that.page,
						limits:15
					}
				}).then(res => {
					that.showPage = false;
					if (res.code == 0) {
						res.data.data.forEach(v => {
							v.is_checked = false;
							if(that.allChecked){
								v.is_checked = true;
							}else{
								v.is_checked = false;
							}
						})
						that.list = that.list.concat(res.data.data);
						that.totalPage = res.data.last_page;
						if(that.totalPage == that.page){
							that.loadEnd = true;
						}
					}
				})
			},
			addCart(obj){
				this.goodsDetail = obj;
				this.$refs.skuModal.toShowSkuPopup();
			},
			handleGoods() {
				this.isHandleFlag = !this.isHandleFlag
			},
			//选择商品
			selectGoods(index) {
				let list = this.list,
					allChecked = this.allChecked;
				if (list[index].is_checked) {
					list[index].is_checked = false;
					allChecked = false;
				} else {
					list[index].is_checked = true;
					allChecked = list.every(v => {
						return v.is_checked === true
					})
				}
				this.list = list;
				this.allChecked = allChecked;
				this.getSelectGoods()
			},
			//全选
			selectAll() {
				if (this.allChecked) {
					this.allChecked = false;
					this.list.forEach(v => {
						v.is_checked = false;
					})
				} else {
					this.allChecked = true;
					this.list.forEach(v => {
						v.is_checked = true;
					})
				}
				this.getSelectGoods()
			},
			//获取选中商品
			getSelectGoods() {
				let selectGoodsList = this.list.filter(v => {
					return v.is_checked == true
				})
				const selectGoodsIdsArr = selectGoodsList.map(v => {
					return v.id
				})
				this.selectGoodsIds = selectGoodsIdsArr.join(',')
			},
			cancelCoolect(){
				const that = this;
				let submitApi,dataObj;
				if(that.pageType == 0){
					submitApi = app.getApi().user.batchCancelUserCollect;
					dataObj = {
						collect_ids:that.selectGoodsIds
					}
				}else{
					submitApi = app.getApi().user.batchCancelUserFoot;
					dataObj = {
						foot_ids:that.selectGoodsIds
					}
				}
				app.globalRequest({
					api:submitApi,
					method:'POST',
					data:dataObj,
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none'
						});
						that.reload();
						that.allChecked = false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						});
					}
				})
			},
			refreshList(){
				this.refresherTriggered = true;
				this.reload()
				setTimeout(()=>{
					this.refresherTriggered = false;
				},100)
			},
			reload(){
				this.list = [];
				this.page = 1;
				this.totalPage = '';
				this.getList();
			},
			loadData(){
				let that = this;
				if (that.page < that.totalPage) {
					this.loadEnd = false;
					that.page++;
					that.getList()
				} else {
					return;
				}
			},
			getScrollHeight() {
				const editHeight = uni.upx2px(78),
					navbarHeight = app.globalData.headAllHeight,
					elseHeight = editHeight + navbarHeight;
				this.scrollViewHeight = app.globalData.screenHeight - elseHeight;
			},
			toGoodsDetail(id){
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?goods_id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		z-index: 2;
	}

	.edit {
		width: 100%;
		height: 78rpx;
		justify-content: flex-end;
		padding: 0 24rpx;
		box-sizing: border-box;
		color: #fff;
	}

	.main {
		width: 100%;
		background: $supplier-page-color;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.goods-wrap {
		margin: 0 24rpx;
		padding: 24rpx 0 50rpx;
		.goods-con {
			display: grid;
			grid-template-columns: repeat(3, 226rpx);
			justify-content: space-between;
			gap:12rpx;
		}

		.goods-item-con {
			position: relative;

			.select {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 12rpx;
				top: 12rpx;
				z-index: 222;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.footer-wrap {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

		.footer {
			width: 100%;
			height: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.footer-select {
				height: 48rpx;

				image {
					width: 48rpx;
					height: 100%;
				}
			}

			.sure {
				width: 220rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 2rpx solid #EEEEEE;
				font-size: 32rpx;
				color: #DEDBDB;
				margin-left:0;
				margin-right: 0;
			}
			.sure-act{
				border: 2rpx solid $supplier-main-color;
				color: $supplier-main-color;
			}
		}
	}
	.no-data-main{
		margin-top:100rpx;
	}
</style>